<template>
  <div class='bigcontainer'>
  <div class="goods-list">
          <!--使用mui中card.html-->

			<div class="mui-card" v-for='(item,i) in carlist' :key='item.id'>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
          <!--开关按钮是使用mint-ui的form components中的-->
					<mt-switch v-model='$store.getters.selectedorno[item.id]' 
          @change='updateSelected(item.id,$store.getters.selectedorno[item.id])'><!--
            这里的数据$store.getters.selectedorno[item.id]来自store所以v-model只能获取不能设置，但是从此当用户操作html页面上的该按钮的时候
            $store.getters.selectedorno[item.id]里保存的就是按钮的value值是true还是false
            这里使用v-model进行按钮值的绑定，vue对该按钮的值进行了赋值
          value=$store.getters.selectedorno[item.id]这里就是value值变化的时候把它传到方法里面-->
          </mt-switch>
          <img :src='item.thumb_path'>
          <div class='cont-com'>
          <h1>{{item.title}}</h1>
          <p>
            <span class='price'>￥{{item.sell_price}}</span>
            <numbox :num='$store.getters.getcarcount[item.id]' :id='item.id'></numbox><!--在渲染数据的时候通过商品id获取用户想买该商品的件数值count传递给子
            组件来显示出来，购物车中的每件商品要显示出用户想买的件数，而这个件数存放在store上，在这个地方怎么拿到？这个地方被渲染的时候只有商品的id能被
            获取到，所以我们可以对store上购物车中的商品id和该商品用户想买的件数形成对应关系放入一个对象里，在这个地方循环的时候通过对象访问属性的形式
            获取到该商品对应的用户想买的件数并传到子组件中去显示-->
            <a href='#' @click.prevent='remove(item.id,i)'>删除</a>
          </p>
          </div>
					</div>
				</div>
			</div>

			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
					<div class="zuob">
                <p>总计（不包含运费）</p>
                <p>
                以勾选商品<span class='red'>{{$store.getters.gettotalcommodityprice.selectedcount}}</span>件，
                总价：<span class='red'>￥{{$store.getters.gettotalcommodityprice.total}}</span>
                </p>
          </div>
          <div class="youb">
                <mt-button type="danger" >去结算</mt-button>
          </div>
					</div>
				</div>
			</div>

    </div>
  </div>
</template>

<script>
import numbox from '../subcomponent/shoopcar_numbox.vue'
export default{
  data(){
    return{
      carlist:[]
    }
  },
  created(){
    this.getshopcarlist()
  },
  methods:{
    getshopcarlist(){
      var arr=[]
      this.$store.state.car.forEach(item=>{
        arr.push(item.id)
      })
      if(arr.length<=0){
        return//如果购物车里面没有数据的话就不发送请求，不让发送的请求中没有拼接上id会报错
      }
      //请求接口所需id从store上获取因为store上存放的是用户想要购买的商品，通过接口用户想要购买的商品id得到数据，而这些得到的数据要渲染到页面上去
      
      this.$http.get('api/goods/getshopcarlist/'+arr.join(',')).then(result=>{//接口需要的商品id已经被挂载到store上了
        if(result.body.status==0){
          this.carlist=result.body.message
          console.log(this.carlist)
        }
      })
    },
    remove(id,index){
      //删除购物车中的数据的时候
      //首先要把本地数据carlist中的对应的哪一项删除，循环遍历时候的索引对应的就是carlist中的那个数据
      this.carlist.splice(index,1)
      //然后把store上的公共数据中对应的哪一项也要删除，可以把当前商品id传过去找到要删除的哪一项
      this.$store.commit('removeitem',id)
    },
    updateSelected(id,value){
      // console.log(id,value)
      this.$store.commit('updateSelected',{id,selected:value})
    }
  },
  components:{
    numbox,
  }
}
</script>

<style lang="scss" scoped>
.bigcontainer{
  background-color:#eee;
  overflow:hidden;
}
.goods-list{
  .mui-card-content-inner{
    display:flex;
    img{
      //width:60px;
      height:60px;
    }
    h1{
      font-size:13px;
    }
    .cont-com{
      p{
        margin-top:10px;
      }
        .price{
        color:red;
      }
    }
    
  }
}
.jiesuan{
    display: flex;
    justify-content: space-between;
    align-items: center;//设置伸缩项目的对齐方式
    .red{
      color:red;
      font-weight:bold;
      font-size:16px;
    }
}
</style>